<template>
  <div id="activityPage">
    <div class="actionBar">
      <div>
        当前状态：共<span>{{total}}</span>条
      </div>
      <div class="build" @click="build">+新增</div>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>排序</th>
          <th>图片</th>
          <th>标题</th>
          <th>链接地址</th>
          <th>开始时间</th>
          <th>截止时间</th>
          <th>公布范围</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :data-sort="index" :id="item.activityId">
          <td>{{index + 1}}</td>
          <td><img :src="item.activityImg"/></td>
          <td>{{item.activityTitle}}</td>
          <td><a :href="item.activityUrl">{{item.activityUrl}}</a></td>
          <td>{{item.activityStartTime}}</td>
          <td>{{item.activityEndTime}}</td>
          <td>{{item.activityScope === 0 ? '所有用户' : '指定用户'}}</td>
          <td>{{item.activityState === 0 ? '已发布' : item.publishStatus === 1 ? '预约中' : '已过期'}}</td>
          <td style="font-size: 20px">
            <i class="el-icon-edit" @click="edit($event)"></i>
            <i class="el-icon-delete" @click="remove($event)"></i>
          </td>
        </tr>
      </tbody>
    </table>
    <el-dialog :visible.sync="dialog"
               size="tiny">
      <el-form label-width="100px">
        <el-form-item label="活动图片">
          <input type="file" @change="getFile($event)"/>
        </el-form-item>
        <el-form-item label="活动标题">
          <el-input v-model="formData.activityTitle"></el-input>
        </el-form-item>
        <el-form-item label="跳转链接">
          <el-input v-model="formData.activityUrl"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
            <el-date-picker v-model="formData.activityStartTime"
                            type="datetime"
                            placeholder="选择开始时间"
                            align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker v-model="formData.activityEndTime"
                            type="datetime"
                            placeholder="选择结束时间"
                            align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="公布范围">
            <el-radio class="radio" v-model="formData.activityScope" :label="0">所有用户</el-radio>
            <el-radio class="radio" v-model="formData.activityScope" :label="1">指定用户</el-radio>
            <el-input v-model="formData.scopeDescription"></el-input>
          </el-form-item>
          <el-button type="primary" @click="formSubmit">提交</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import axios from 'axios'
  export default{
    name: 'activityPage',
    data () {
      return {
        total: 0,
        tableData: [],
        dialog: false,
        form_token: '',
        formData: {
          activityFile: '',
          activityTitle: '',
          activityUrl: '',
          activityStartTime: '',
          activityEndTime: '',
          activityId: '',
          activityScope: 0,
          scopeDescription: ''
        }
      }
    },
    beforeCreate () {
      this.$store.commit('CHANGESTATE', [0, 1, 0, 0])
      this.$store.commit('CHANGESTATECOL', [1, 0, 0, 0, 0, 0])
    },
    created () {
      this.axios(1)
    },
    methods: {
      axios (index) {
        axios({
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          url: this.$store.state.baseURI + 'oss/activity/query',
          method: 'get',
          params: {
            page_num: index,
            token: this.$store.state.token
          }
        }).then(obj => {
          if (obj.data.code === 100) {
            this.total = obj.data.data.total
            this.tableData = obj.data.data.list
          } else {
            this.$router.push('/')
          }
        })
      },
      build () {
        this.dialog = true
        this.getFormToken()
      },
      getFile (event) {
        this.formData.activityFile = event.target.files[0]
      },
      formSubmit () {
        var formData = new FormData()
        var that = this
        formData.append('token', this.$store.state.token)
        formData.append('form_token', this.form_token)
        formData.append('activity_file', this.formData.activityFile)
        formData.append('activity_title', this.formData.activityTitle)
        formData.append('activity_url', this.formData.activityUrl)
        formData.append('start_time', this.formatTime(this.formData.activityStartTime))
        formData.append('end_time', this.formatTime(this.formData.activityEndTime))
        formData.append('activity_scope', this.formData.activityScope)
        formData.append('scope_description', this.formData.scopeDescription)
        formData.append('id', this.formData.activityId)
        var xhr = new XMLHttpRequest()
        console.log(this.formData.activityId)
        if (this.formData.activityId === '') xhr.open('POST', this.$store.state.baseURI + 'oss/activity/save')
        else xhr.open('POST', this.$store.state.baseURI + 'oss/activity/update')
        xhr.onload = function (event) {
          if (xhr.status === 200) {
            var obj = JSON.parse(xhr.responseText)
            that.axios(1)
            if (obj.code === 100) {
              that.dialog = false
              that.$message({
                message: '操作成功',
                type: 'success'
              })
            } else {
              that.$message.error(obj.message)
            }
          }
        }
        xhr.send(formData)
      },
      edit (event) {
        this.formData = this.tableData[event.path[2].getAttribute('data-sort')]
        this.dialog = true
        this.getFormToken()
      },
      remove (event) {
        var id = event.path[2].getAttribute('id')
        var sort = Math.floor(event.path[2].getAttribute('data-sort'))
        alert(id)
        this.$confirm('此操作将永久删除该行内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            url: this.$store.state.baseURI + 'oss/activity/delete',
            method: 'post',
            params: {token: this.$store.state.token, activity_id: id}
          }).then(obj => {
            if (obj.data.code === 100) {
              this.tableData.splice(sort + 1, 1)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
</script>
<style></style>
